<!--  区县 - 自建房核查统计 -->
<template>
  <div>
    <div class="header">
      <div> 自建房核查统计 </div>
      <div class="table-settings">
        <ImportSetting :tableData="tableData" :tableColumns="tableColumns" v-if="true" />
      </div>
    </div>
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :pagination="false"
      bordered
      :loading="loading"
    />
  </div>
</template>
<script lang="ts" setup>
  import { reactive, toRefs, onMounted } from 'vue';
  import ImportSetting from './ImportSetting.vue';
  import { getCountPostList } from '/@/api/demo/system';
  import { iTableData, iTableColumns } from './types/table';
  import { useUserStore } from '/@/store/modules/user';
  import { iParams } from './types/params';

  // 转义地区编码
  import { selectClassFlyDict } from '/@/dict/bj_dict';
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    id: number;
    loading: Boolean;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 100,
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: '行政区代码',
        dataIndex: 'xzqdm',
        key: 'xzqdm',
        align: 'center',
      },
      {
        title: '经营性自建房总数',
        dataIndex: 'total',
        key: 'total',
        align: 'center',
      },
      {
        title: '已排查',
        dataIndex: 'dc_ypc',
        key: 'dc_ypc',
        align: 'center',
      },
      {
        title: '排查中',
        dataIndex: 'dc_pcz',
        key: 'dc_pcz',
        align: 'center',
      },
      {
        title: '待排查',
        dataIndex: 'dc_dpc',
        key: 'dc_dpc',
        align: 'center',
      },
      {
        title: '区级核查抽样数',
        dataIndex: 'hc_total',
        key: 'hc_total',
        align: 'center',
      },

      {
        title: '抽样比例',
        dataIndex: 'hc_ratio',
        key: 'hc_ratio',
        align: 'center',
      },
      {
        title: '核查_正确',
        dataIndex: 'hc_zq',
        key: 'hc_zq',
        align: 'center',
      },
      {
        title: '核查_不正确',
        dataIndex: 'hc_bzq',
        key: 'hc_bzq',
        align: 'center',
      },

      {
        title: '未核查',
        dataIndex: 'hc_whc',
        key: 'hc_whc',
        align: 'center',
      },

      {
        title: '核查进度',
        dataIndex: 'hc_jd',
        key: 'hc_jd',
        align: 'center',
      },
    ],
    id: null,
    loading: true,
  });
  let { tableData, tableColumns, loading } = toRefs(data);
  function getAreaToken() {
    const { getUserInfo } = useUserStore();
    data.id = getUserInfo.district.id;
  }
  async function getData() {
    // 北京市 下面 区县的 数据
    let params: iParams = {
      id: `zj_tj_yhpc_qx`,
      xzqdm: `${data.id}`,
    };
    // 北京市  区县的接口
    let res: any = await getCountPostList(params);
    console.log('@res===', res);

    if (res || res.length > 0) {
      data.loading = false;
      res.forEach((item: any, index: number) => {
        item.name = selectClassFlyDict(item.xzqdm);
        item.index = index + 1;
        if (item.hc_jd === null) {
          item.hc_jd = '';
        } else {
          item.hc_jd = `${item.hc_jd}%`;
        }
      });
      // console.log('data', data);
      data.tableData = [...res];
    }
    // let params = {
    //   id: `zj_tj_yhpc_${id}`,
    // };
    // let res: any = await getCountList(params);
    // if (res || res.length > 0) {
    //   data.loading = false;
    //   res.forEach((item: any, index: number) => {
    //     item.name = selectClassFlyDict(item.xzqdm);
    //     item.index = index + 1;
    //     if (item.hc_jd === null) {
    //       item.hc_jd = '';
    //     } else {
    //       item.hc_jd = `${item.hc_jd}%`;
    //     }
    //   });
    //   // console.log('data', data);
    //   data.tableData = [...res];
    // }
  }
  onMounted(() => {
    getAreaToken();
    getData();
  });
</script>

<style lang="less">
  .header {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    .table-settings {
      & > * {
        margin-right: 12px;
      }

      svg {
        width: 1.3em;
        height: 1.3em;
      }
    }
  }
</style>
